:root {
  --black: #000000;
  --white: #ffffff;
  --bg: #FFFFFF;
  --text: #0B0B0B;
  --muted: #6B7280;
  --line: #E5E7EB;
  --container: 1200px;
  --nav-hover: #b57edc;
  --nav-active: #8a3ab9;
  --purple-bg: #f2e5fc;
}

a {
  text-decoration: none;
  color: inherit;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  z-index: 1000;
}

.site-header ul {
  list-style: none;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 3vw;
  max-height: 12vh;
}

.logo {
  font-size: 1.75rem;
  font-weight: 600;
}

.logo span {
  color: var(--nav-hover);
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 1.125rem;
  font-weight: 400;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--nav-hover);
}

.nav-links a.active {
  color: var(--nav-active);
}

.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
}

/* ===== NAV: Responsive (<=900px) ===== */
@media (max-width:900px) {
  .navbar {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: .75rem 3vw;
    gap: .5rem;
    width: 100vw;
    max-height: 10vh;
  }

  .menu-toggle {
    display: block !important;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 2vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .logo {
    font-size: 1.5rem;
  }
}

/* ===== NAV: Extra small (<=600px) ===== */
@media (max-width:600px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: .75rem 3vw;
    gap: .25rem;
    width: 100vw;
    box-sizing: border-box;
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-links a {
    font-size: .9rem;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  overflow-x: hidden;
}

/* Layout helper matching your container */
.container {
  width: 100%;
  max-width: none;
  margin: 0;
  /* remove the 24px padding */
}

/* ====== Case study styles (unchanged) ====== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding-left: 8vw;
  background-color: var(--purple-bg);
}

/* Image background for this page's hero */
.hero--adm {
  /* update path to your image; path is relative to the CSS file */
  background: url("../images/AngelesDeMeddlin/AngledHero.png") center / cover no-repeat;
  background-color: var(--purple-bg);
}

.hero--ad {
  /* update path to your image; path is relative to the CSS file */
  background: url("../../Project_page/Untitled_design-5.png") center / cover no-repeat;
  background-color: var(--purple-bg);
}

#before {
  display: block;
  width: 100%;
  /* fill the right column width */
  max-width: 520px;
  /* don't grow beyond this */
  height: auto;
  justify-self: center;
  /* center horizontally within the right column */
  align-self: center;
  /* center vertically w.r.t. the text */
}

.title {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.subtitle {
  color: var(--muted);
  margin-top: 12px;
  font-size: 20px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  max-width: 60vw;
}

.pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: #f6f6f6;
  color: #111;
  border: 1px solid #000000;
  font-weight: 600;
  font-size: 16px;
}

section {
  padding: 10vh 10vw;
}

.problem {
  text-align: center;
}

.problem h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.section h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.problem p {
  max-width: 850px;
  margin-inline: auto;
  line-height: 1.9;
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr minmax(340px, 1fr);
  /* text | image */
  gap: 80px;
  align-items: center;
  /* vertically center both columns */
  background-color: var(--purple-bg);
  padding: 10vh 5vw 10vh 10vw;
}

.two-col img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* optional: adds soft rounding to match your theme */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.two-col>div {
  align-self: center;
}

.two-col h2 {
  font-size: 2.4rem;
  margin-bottom: 16px;
}

.objectives-gif {
  text-align: center;
  margin-top: 20px;
}

.objectives-gif img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

.objectives-gif figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #555;
  font-style: italic;
}

@media (min-width: 901px) {
  .objectives-gif figcaption {
    font-size: 0.85rem;
  }
}

.user-needs {
  background-color: var(--purple-bg);
}

.user-needs h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.outcome {
  background-color: var(--purple-bg);
  display: grid;
  grid-template-columns: 1.4fr 0.9fr; /* keeps text more dominant */
  align-items: start; /* align top with heading */
  gap: 3rem;
  padding: 8vh 10vw;
}

.outcome-ADM {
  background-color: var(--purple-bg);
}

.outcome h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.outcome-ADM h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.outcome p,
.outcome li {
  font-size: 1.05rem; /* restores normal readable text size */
  line-height: 1.9;
}

.outcome-ADM p,
.outcome-ADM li {
  font-size: 1.05rem; /* restores normal readable text size */
  line-height: 1.9;
}

.outcome-gif {
  text-align: center;               /* keep centered on wide screens too */
}
.outcome-gif img {
  display: block;
  height: auto;
  /* min 240px, prefer 20vw, cap at 380px on wide screens */
  width: clamp(300px, 13vw, 350px);
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
}

/* Stack layout + bigger clamp on mobile to keep presence */
@media (max-width: 900px) {
  .outcome {
    grid-template-columns: 1fr;
    align-items: center;            /* vertically align content */
    text-align: left;
    padding: 6vh 8vw;
  }
  .outcome-gif img {
    /* min 280px, prefer 60vw, cap at 350px on phones/tablets */
    width: clamp(220px, 60vw, 350px);
    margin-top: 2rem;
    place-self: center;             /* make sure the grid item centers */
  }
}
/* ADM (bottom laptop GIF) — make it big and hero-like */
.outcome-ADM .outcome-gif {
  text-align: center;
  margin-top: 1.25rem;
}
.outcome-ADM .outcome-gif img {
  display: block;
  height: auto;
  /* min 520px, prefer 64vw, cap 1100px (constrained by section padding) */
  width: clamp(520px, 64vw, 1100px);
  max-width: 100%;
  margin: 1.25rem auto 0;
  border-radius: 12px;
  object-fit: contain;
}

/* Mobile/tablet: keep presence large */
@media (max-width: 900px) {
  .outcome-ADM .outcome-gif img {
    /* min 320px, prefer 90vw, cap 900px */
    width: clamp(320px, 90vw, 900px);
    margin-top: 1.5rem;
  }
}

.bullets {
  list-style: none;
}

.bullets li {
  position: static;     /* no absolute pseudo-dot math */
  padding-left: 0;      /* remove space reserved for the pseudo-dot */
}
.bullets li::before {
  content: none !important;  /* kill the extra dot */
}

.img-box {
  min-height: 460px;
  display: grid;
  place-items: center;
  color: #6B7280;
  background: #F3F4F6;
  border: 1px dashed var(--line);
  border-radius: 22px;
}

/* Process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  align-items: start;
  justify-items: center;
  margin-top: 36px;
}

.process-item {
  text-align: center;
  max-width: 260px;
}

.process-icon {
  width: 130px;
  height: 130px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #f6f5fa;
  display: grid;
  place-items: center;
  color: var(--nav-active);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, background 0.25s ease;
}

.process-icon i {
  font-size: 2.8rem;
}

/* Hover effect */
.process-item:hover .process-icon {
  transform: translateY(-6px);
  background: var(--purple-bg);
}

.process-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

.process-item h3 {
  margin: 8px 0 10px;
  font-size: 24px;
  font-weight: 700;
}

.process-item p {
  line-height: 1.8;
  margin: 0 auto;
}

.screens-grid img {
  width: 100%;
  max-width: 720px;   /* adjust based on how wide you want it */
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px; /* optional: matches top image style */
}

/* Ensure its parent container doesn’t cause horizontal overflow */
.screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 3rem;
  margin: 0 auto;
  max-width: 1100px;
}

#harmonize-screens{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: 3rem;
  margin: 0 auto;
  max-width: 1100px;
}


.screen-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.arrow-down {
  color: var(--nav-active);
  font-size: 1.8rem;
}

/* @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
} */

.screen {
  aspect-ratio: 1 / 2;
  background: #F3F4F6;
  border: 1px dashed var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 14vw;         /* smaller default size */
  max-width: 260px;    /* cap the width */
}


.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bullets {
  list-style: disc;
  padding-left: 1.5rem;   /* indent */
}
.bullets > li {
  margin: 0.35rem 0;
}

/* Secondary list (nested) */
.bullets .sub-bullets,
.bullets > li > ul {
  list-style: circle;     /* secondary bullet style */
  padding-left: 1.25rem;  /* nested indent */
  margin-top: 0.35rem;
}
.bullets .sub-bullets > li {
  margin: 0.25rem 0;
}

/* (Optional) tertiary bullets if you ever go one level deeper */
.bullets .sub-bullets ul {
  list-style: square;
  padding-left: 1.25rem;
}

.key-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 2rem;
  align-items: start;
  margin-bottom: 4vh;
}

.key-column h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.key-column .bullets li {
  margin: 0.75rem 0;
  line-height: 1.8;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .key-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.hero-phones {
  position: absolute;
  right: 30vw;
  top: -50vh;
  width: 56vw;
  max-width: 760px;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero-phones .cluster {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(56vw, 760px);
  transform: rotate(-40deg);
  transform-origin: top right;
}

.hero-phones .col {
  display: grid;
  gap: 18px;
  will-change: transform;
}

.hero-phones figure.screen {
  margin: 0;
  width: 15vw;
  height: 45vh;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  display: block;
  position: relative;
}

.hero-phones figure.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive tweaks */
@media(max-width:1100px) {

.title {
  display: flex;
  flex-wrap: wrap;
  max-width: 60vw;
  font-size: clamp(32px, 12vw, 55px);
}
  .hero-phones {
    width: 70vw;
    max-width: none;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}
@media (max-width: 900px) and (min-width: 701px) {
  .screens-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 2rem;
  }

  #harmonize-screens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 2rem;
  }

  .screen {
    width: 36vw; /* keep them nicely sized */
    max-width: 300px;
  }
}

/* Under 700px: stack single column */
@media (max-width: 700px) {
  .screens-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
  }

  #harmonize-screens {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
  }

  .screen {
    width: 70vw;
    max-width: 340px;
  }
}

@media(max-width:700px) {
  .hero {
    padding-left: 5vw;
  }

  .title {
    display: flex;
    flex-wrap: wrap;
    max-width: 60vw;
    font-size: clamp(32px, 12vw, 55px);
  }

  .process-grid,
  .screens-grid {
    grid-template-columns: 1fr;
  }

  section {
    padding: 3vh 5vw;
  }
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
    /* single column */
    gap: 24px;
  }

  #before {
    justify-self: center;
    width: min(680px, 90vw);
    /* nice large size on phones/tablets */
    max-width: 100%;
  }

  .screens-grid {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    /* smaller gap between stacked screens */
  }
}
.site-footer {
  text-align: center;
  padding: 2rem 0;
  font-size: .875rem;
  background: var(--white);
}